<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" class="order-card-tabs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <p v-if="activeKey === 'tab1'">
      <InsuranceAreaCostOrder />
    </p>
    <p v-if="activeKey === 'tab2'">
      <InsurancePlatformCostOrder />
    </p>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';

  import InsuranceAreaCostOrder from './InsuranceAreaCostOrder.vue';
  import InsurancePlatformCostOrder from './InsurancePlatformCostOrder.vue';
  const activeKey = ref('tab1');

  const tabListTitle = [
    {
      key: 'tab1',
      tab: '地区保费排名',
    },
    {
      key: 'tab2',
      tab: '平台保费排名',
    },
  ];

  function onTabChange(key) {
    activeKey.value = key;
  }
</script>
<style lang="less" scoped>
  .order-card-tabs {
    width: 30%;
  }
</style>
